<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>状态提升</title>
	</head>
	<body>
		<div id="root"></div>

		<script
			type="text/javascript"
			src="./components/react.development.js"
		></script>
		<script
			type="text/javascript"
			src="./components/react-dom.development.js"
		></script>
		<script type="text/javascript" src="./components/babel.min.js"></script>

    <script type="text/babel">
		// 温度显示
    function BoilingVerdict (props) {
      if (props.celsius >= 100) {
        return <p>The Water would boil.</p>
      } 
      return <p>The Water would not boil.</p>
    }

    // class Calculator extends React.Component {
    //   constructor (props) {
    //     super(props);
    //     this.handleChange = this.handleChange.bind(this);
    //     this.state = { temperature: ''};
    //   }

    //   handleChange (e) {
    //     this.setState({temperature: e.target.value})
    //   }

    //   render () {
    //     const temperature = this.state.temperature;
    //     return (
    //       <fieldset>
    //         <legend>Enter temperature in Celsius:</legend>
    //         <input value={temperature} onChange={this.handleChange} />
    //         <BoilingVerdict celsius={temperature}/>
    //       </fieldset>
    //     )
    //   }
    // }
    const scaleNames = {
      c: 'Celsius',
      f: 'Fahrenheit'
    };
  

    // 编写转换函数
    function toCelsius (fahrenheit) {
      return (fahrenheit - 32) * 5 / 9;
    }

    function toFahrenheit (celsius) {
      return (celsius * 9 / 5) + 32;
    }

    function tryConvert(temperature, convert) {
      const input = parseFloat(temperature);
      if (Number.isNaN(input)) {
        return '';
      }
      const output = convert(input);
      const rounded = Math.round(output * 1000) / 1000;
      return rounded.toString();
    }

    class TemperatureInput extends React.Component {
      constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
      }

      handleChange(e) {
        this.props.onTemperatureChange(e.target.value);
      }

      render() {
        const temperature = this.props.temperature;
        const scale = this.props.scale;
        return (
          <fieldset>
            <legend>Enter temperature in {scaleNames[scale]}:</legend>
            <input value={temperature}
                  onChange={this.handleChange} />
          </fieldset>
        );
      }
    }

    class Calculator extends React.Component {
      constructor(props) {
        super(props);
        this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
        this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
        this.state = {temperature: '', scale: 'c'};
      }

      handleCelsiusChange(temperature) {
        this.setState({scale: 'c', temperature});
      }

      handleFahrenheitChange(temperature) {
        this.setState({scale: 'f', temperature});
      }

      render() {
        const scale = this.state.scale;
        const temperature = this.state.temperature;
        const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;
        const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;

        return (
          <div>
            <TemperatureInput
              scale="c"
              temperature={celsius}
              onTemperatureChange={this.handleCelsiusChange} />
            <TemperatureInput
              scale="f"
              temperature={fahrenheit}
              onTemperatureChange={this.handleFahrenheitChange} />
            <BoilingVerdict
              celsius={parseFloat(celsius)} />
          </div>
        );
      }
    }

    ReactDOM.render(
      <Calculator />,
      document.getElementById('root')
    )

    // 在 React 中，将多个组件中需要共享的 state 向上移动到它们的最近共同父组件中，便可实现共享 state。这就是所谓的“状态提升”。


		</script>
	</body>
</html>
